<template>
  <!-- inbound查询页面 -->
  <section class="page inbound-query">
    <data-form :model="model" @onSearch="refreshData" @handleResetForm="handleResetForm" :page="pageService">
      <template slot="inputs">
        <el-form-item label="借据号" prop="caseNumber">
          <el-input v-model="model.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input v-model="model.personalName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobileNo">
          <el-input v-model="model.mobileNo"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="model.idCard"></el-input>
        </el-form-item>
        <el-form-item label="案件状态" prop="collectionStatus">
          <el-select v-model="model.collectionStatus" placeholder="请选择" clearable>
            <el-option v-for="{index,name,code} in collectionStatus" :key="index" :label="name" :value="code"></el-option>
        </el-select>
         </el-form-item>
        <el-form-item label="案件金额" prop="overdueAmount">
          <number-range v-model="model.overdueAmount" :isInteger="true"></number-range>
        </el-form-item>
        <el-form-item label="逾期阶段" prop="overduePeriod">
          <el-select v-model="model.overduePeriod" placeholder="请选择" clearable>
            <el-option v-for="{index,name,code} in $dict.getDictData('OverduePeriodStatus')" :key="index" :label="name" :value="code.replace(/M|\+/, '')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="逾期天数" prop="overdueDays">
          <number-range v-model="model.overdueDays" :isInteger="true"></number-range>
        </el-form-item>
        <el-form-item label="地区" prop="area">
          <el-cascader v-model="model.area" :options="$city.getCityData()" change-on-select clearable></el-cascader>
        </el-form-item>
        <el-form-item label="催收员" prop="currentCollectorRealName">
          <el-input v-model="model.currentCollectorRealName"></el-input>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="dataSet" :sort="sortService" :page="pageService" @onPageChange="refreshData">
      <template slot="columns">
        <el-table-column prop="caseNumber" label="借据号" :min-width="$helper.getColumnWidth(6)">
          <template slot-scope="scope">
            <a  @click="openExecutionPage(scope.row)">{{scope.row.caseNumber}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="personalName" label="客户姓名" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="mobileNo" label="手机号" :formatter="(row)=>$filter.encryptPhone(row.mobileNo)" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="idCard" label="身份证号" :formatter="(row)=>$filter.encryptIDCardFour(row.idCard)" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="area" label="地区" :min-width="$helper.getColumnWidth(4)" :formatter="(row) => $city.getInheritNames(Number(row.area))">
        </el-table-column>
        <el-table-column prop="overdueAmount" label="案件金额(元)" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="overduePeriod" label="逾期阶段" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="overdueDays" label="逾期天数" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="sysCode" label="系统来源" :formatter="(row) => $filter.encryptSysCode(row.sysCode)" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="productName" label="产品名称" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="perDueDate" label="还款日" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="currentCollectorRealName" label="永久催收员" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="tempCollectorRealName" label="临时催收员" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="lockCollectorRealName" label="锁定人员" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="leaveCaseFlag" label="留案标识" :formatter="(row) => $filter.dictConvert(row.leaveCaseFlag,'CommonFlag')" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="leaveDueDate" label="留案到期时间" :formatter="(row) => $filter.dateFormat(row.leaveDueDate)" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
         <el-table-column prop="collectionStatus" label="案件状态" :formatter="(row) => $filter.dictConvert(row.collectionStatus,'CollectionStatus')" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Auth, Layout, Dependencies } from '~/core/decorator';
import { PageService } from '~/utils/page.service';
import { SortService } from '~/utils/sort.service';
import DataForm from '~/components/common/data-form.vue';
import DataBox from '~/components/common/data-box.vue';
import NumberRange from '~/components/common/number-range.vue';
import { Getter, Mutation, namespace } from 'vuex-class';
import { ApplyType, CASE_CHANNEL, CASE_HALT_CATEGORY } from '~/config/enum.config';
import { OpenExecutionData } from "~/config/types";
import { SynthesizeQueryService } from "~/services/domain-service/synthesize-query.service";

const CollectionExecutionModule = namespace('collection-execution');

@Layout('workspace')
@Component({
  components: {
    DataForm,
    DataBox,
    NumberRange,
  },
})
export default class InBoundQuery extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(SynthesizeQueryService)
  private synthesizeQuerService: SynthesizeQueryService;

  private callDepartmentData;

  @CollectionExecutionModule.Action private openCollectionExecution;
  @CollectionExecutionModule.Getter private hasAddRecordOnClose:boolean;

  private caseType = CASE_CHANNEL.tel;
  private booleanValue = false;
  private isHiddenButton =false;
  private caseId:any ;
  private model: any = {
    caseNumber: '',
    personalName: '',
    mobileNo: '',
    idCard: '',
    currentCollectorRealName :'',
    collectionStatus : '',
    overdueAmount: {
      max: '',
      min: '',
    },
    overduePeriod: '',
    overdueDays: {
      max: '',
      min: '',
    },
    area: [],
  };
  private dataSet: any[] = [];

  private mounted() {
    // this.refreshData()
  }

  private activated(){
    if(!this.hasAddRecordOnClose && this.caseId){
      this.synthesizeQuerService.bindLockingCollector(this.caseId).
      subscribe((data) => {
          setTimeout(() => {
            this.refreshData()
          },100)  
      });
    }
  }

  private inBoundQuery() {
    const exists = Object.values(this.model).filter(x => {
        if (x instanceof Object) {
          return !!Object.values(x).filter(sub=> !!sub).length;
        } else if (Array.isArray(x)) {
            return !!(x as any).filter(array=> !!array).length;
        } else {
          return !!x;
        }
    });

    if (!exists.length) {
        this.$message.warning("请输入至少一项查询条件")
        return;
    }

    this.synthesizeQuerService
      .inboundQuery(this.model, this.pageService)
      .subscribe((data) => {
        this.dataSet = data
        if(this.dataSet){
          this.dataSet.forEach(x=>{
            x.overduePeriod>12?x.overduePeriod = 'M12+':x.overduePeriod = 'M'+x.overduePeriod
          })
        }
      });
  }
 
  private refreshData() {
    this.inBoundQuery()
  }

  /**
   * 表单范围输入框重置
   */
  private handleResetForm() {
    this.model.overdueAmount = { min: "", max: "" };
    this.model.overdueDays = { min: "", max: "" };
  }

  /**
   * 进入查看执行页
   */
  private openExecutionPage(row) {
      this.caseId = row.id;
      //控制打开催收页类别
      if(row.collectionType === 'TEL' && row.collectionStatus === 'INNER_COLLECTING' ){
         this.caseType = CASE_CHANNEL.tel;
         this.booleanValue =false;
         this.isHiddenButton = true;
      }else if(row.collectionType === 'TEL' && row.collectionStatus !== 'INNER_COLLECTING'){
         this.caseType = CASE_CHANNEL.tel;
         this.booleanValue =true;
         this.isHiddenButton = true;
      }else if(row.collectionType === 'VISIT' && row.collectionStatus === 'INNER_COLLECTING' ){
         this.caseType = CASE_CHANNEL.visit;
         this.booleanValue =false;
         this.isHiddenButton = true;
      }else if(row.collectionType === 'VISIT' && row.collectionStatus !== 'INNER_COLLECTING'){
         this.caseType = CASE_CHANNEL.visit;
         this.booleanValue =true;
         this.isHiddenButton = true;
      }

    this.openCollectionExecution(new OpenExecutionData(row.id, row.caseNumber, this.caseType,this.booleanValue,this.isHiddenButton))
    
  }

  //过滤案件状态类型
  private get collectionStatus() {
    const enableCollectionStatus: any = ["INNER_COLLECTING", "INNER_BANKC", "INNER_PAYOFF"]
    return this.$dict.getDictData('CollectionStatus').filter(v => enableCollectionStatus.includes(v.code))
  }
}
</script>

<style lang="less" scoped>
</style>
